<template>
    <div class="PersonResumeLook">
        <!-- 内容区域 -->
        <div class="main cl">
            <!-- banner -->
            <div class="banner"></div>
            <!-- block -->
            <div class="block">
                <div class="resume">
                    <!-- 个人信息 -->
                    <div class="section userinfo">
                        <div class="primary">
                            <div class="photo">
                                <el-avatar :size="80" :src="photo"></el-avatar>
                            </div>
                            <div class="text">
                                <div class="name">{{ this.formUserInfo.name }}
                                    <span>更新时间：{{ this.formUserInfo.updateTime }}</span>
                                </div>
                                <div class="other">
                                    <span v-if="this.formUserInfo.sex==1">男</span>
                                    <span v-else>女</span>
                                    <span>{{ this.formUserInfo.age }}岁</span>
                                    <span>{{ this.formUserInfo.liveCity_dictText |deft }}</span>
                                    <span v-if="!this.formUserInfo.jobTimeFlag">{{
                                            this.formUserInfo.workYear
                                        }}年工作经验</span>
                                    <span v-else>0年工作经验</span>
                                </div>
                                <div class="contact">
                                    <span><i class="iconfont icon-phone"></i>{{ this.formUserInfo.phone  |deft }}</span>
                                    <span><i class="iconfont icon-email"></i>{{ this.formUserInfo.email  |deft }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 个人优势 -->
                    <div class="section advantage" v-if="resumeType == 1">
                        <div class="title">个人优势</div>
                        <div class="primary" v-if="!formAdvantageShow">
                            <pre class="txt">{{ formAdvantage.advantage  |deft }}</pre>
                        </div>
                    </div>
                    <div class="section advantage" v-if="resumeType == 2">
                        <div class="title">主要研究方向及成果</div>
                        <div class="primary" v-if="!majorResearchDirectionShow">
                            <pre class="txt">{{ formAdvantage.majorResearchDirection  |deft }}</pre>
                        </div>
                    </div>
                    <div class="section advantage" v-if="resumeType == 2">
                        <div class="title">自我综合评价</div>
                        <div class="primary" v-if="!selfEvaluationShow">
                            <pre class="txt">{{ formAdvantage.selfEvaluation  |deft }}</pre>
                        </div>
                    </div>
                    <div class="section advantage" v-if="resumeType == 2">
                        <div class="title">其他情况（校内任职情况等）</div>
                        <div class="primary" v-if="!otherSituationsShow">
                            <pre class="txt">{{ formAdvantage.otherSituations |deft }}</pre>
                        </div>
                    </div>
                    <!-- 期望职位 -->
                    <div class="section wantJob" v-if="resumeType == 1">
                        <div class="title">期望职位</div>
                        <div class="primary" v-if="!formWantJobShow">
                            <ul>
                                <li v-if="!wantJobList || wantJobList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-for="(item,index) in wantJobList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.workNature_dictText[1] }}</div>
                                        <dl>
                                            <dd>期望行业: {{ item.workIndustry_dictText[1] }}</dd>
                                            <dd>工作城市: {{ item.cityId_dictText }}</dd>
                                            <dd>薪资要求: {{ item.money1 }}</dd>
                                            <dd>求职类型: {{ item.workType_dictText }}</dd>
                                        </dl>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 工作/实习经历 -->
                    <div class="section work">
                        <div class="title">{{resumeType == 2 ? '实习经历' : '工作经历'}}</div>
                        <div class="primary" v-if="!formWorkShow">
                            <ul>
                                <li v-if="!workList || workList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-for="(item,index) in workList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.companyName }}
                                            <span>{{ item.workStartTime_dictText }} - {{
                                                    item.workEndTime_dictText
                                                }}</span></div>
                                        <div class="dsc"><span>{{ item.positionName_dictText[1] }}</span></div>
                                        <dl style="margin: 0" v-if="resumeType == 1">
                                            <dd>税前月薪: {{ item.salary }}元/月</dd>
                                            <!-- <dd>技能标签: <span v-for="(x,y) in item.workSignCode" :key="y">{{ x }}</span>
                                            </dd> -->
                                        </dl>
                                        <div class="dsc" style="margin-top: 5px">
                                            <p v-html="item.workContent"></p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 主要工作业绩 -->
                    <div class="section advantage" v-if="resumeType == 1">
                        <div class="title">主要工作业绩</div>
                        <div class="primary" v-if="!majorWorkPerformanceShow">
                            <pre class="txt">{{ (!formAdvantage.majorWorkPerformance || formAdvantage.majorWorkPerformance == "无") ? "/" : formAdvantage.majorWorkPerformance}}</pre>
                        </div>
                    </div>

                    <!-- 教育经历 -->
                    <div class="section education">
                        <div class="title">教育经历</div>
                        <div class="primary" v-if="!formEducationShow">
                            <ul>
                                <li v-if="!educationList || educationList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-if="!educationList && educationList.length == 0">无</li>
                                <li v-for="(item,index) in educationList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.schoolName }}
                                            <span>{{ item.startEduTime_dictText }} - {{
                                                    item.endEduTime_dictText
                                                }}</span>
                                        </div>
                                        <div class="dsc">
                                            <span>{{ item.major }}</span>
                                            <span>{{ item.eduLevel_dictText }}</span>
                                            <span v-if="item.r1">{{ item.r1_dictText }}</span>
                                            <span v-if="item.recruitmentFlag=='0'">统招</span>
                                            <span v-if="item.recruitmentFlag=='1'">非统招</span>
                                            <span v-if="item.recruitmentFlag=='2'">国外学历</span>
                                            <span v-if="item.r2">{{ item.r2_dictText }}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 项目经历 -->
                    <div class="section project" v-if="resumeType == 1">
                        <div class="title">项目经历</div>
                        <div class="primary" v-if="!formProjectShow">
                            <ul>
                                <li v-if="!projectList || projectList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-if="!projectList && projectList.length == 0">无</li>
                                <li v-for="(item,index) in projectList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.projectName }}
                                            <span>{{ item.startTime_dictText }} - {{ item.endTime_dictText }}</span>
                                        </div>
                                        <div class="dsc">
                                            <div class="tt">项目描述</div>
                                            <p v-html="item.projectDescribe"></p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 培训经历 -->
                    <div class="section train" v-if="resumeType == 1">
                        <div class="title">培训经历</div>
                        <div class="primary" v-if="!formTrainShow">
                            <ul>
                                <li v-if="!trainList || trainList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-for="(item,index) in trainList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.mechanismName }}
                                        </div>
                                        <div class="dsc">
                                            <span>{{ item.curriculum }}</span><span>{{
                                                item.startTime_dictText
                                            }} - {{ item.endTime_dictText }}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 语言能力 -->
                    <div class="section language" v-if="resumeType == 1">
                        <div class="title">语言能力</div>
                        <div class="primary" v-if="!formLanguageShow">
                            <ul>
                                <li v-if="!languageList || languageList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-for="(item,index) in languageList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.type }}
                                        </div>
                                        <div class="dsc">
                                            <span>听说能力：{{
                                                    item.oralLanguageLevel
                                                }}</span><span>读写能力：{{ item.readingLevel }}</span></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 职业特长与技能 -->
                    <div class="section skill" v-if="resumeType == 1">
                        <div class="title">职称</div>
                        <div class="primary" v-if="!formSkillShow">
                            <ul>
                                <li v-if="!skillList || skillList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-for="(item,index) in skillList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.name }}
                                          <span>{{ item.r1 }}</span>
                                          <span >{{item.r2}}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 证书 -->
                    <div class="section certificate">
                        <div class="title">证书</div>
                        <div class="primary" v-if="!formCertificateShow">
                            <ul>
                                <li v-if="!certificateList || certificateList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-if="!certificateList && certificateList.length == 0">无</li>
                                <li v-for="(item,index) in certificateList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.name }}
                                            <span>{{ item.time_dictText }}</span>
                                            <span >{{item.licenseIssuingUnit}}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 家庭成员 -->
                    <div class="section family">
                        <div class="title">家庭成员及重要社会关系</div>
                        <div class="primary">
                            <ul>
                                <li v-if="!familyList || familyList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-for="(item,index) in familyList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.name }}
                                            <span>({{ item.appellation }})</span>
                                            <!--                      <div class="btnEdit" @click="edit('formFamily','edit',item.id)"><i
                                                                      class="el-icon-edit-outline"></i>编辑
                                                                  </div>
                                                                  <div class="btnEdit" @click="delect('formFamily',item.id)"><i class="el-icon-delete"></i>删除</div>-->
                                        </div>

                                        <div class="dsc">
                                            <span v-if="item.age && resumeType == 1">{{ item.age }}岁</span>
                                            <span v-if="item.politics">{{ item.politics }}</span>
                                            <span v-if="item.company">{{ item.company }}</span>
                                            <span v-if="item.position">{{ item.position }}</span>
                                            <span v-if="item.remark">{{ item.remark }}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 附件 -->
                    <div class="section enclosure">
                        <div class="title">附件</div>
                        <div class="primary" v-if="!formEnclosureShow">
                            <ul>
                                <li v-if="!fileList || fileList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-for="(item,index) in fileList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{ item.fileRealName }}
                                            <div class="btnEdit" @click="openFile(item.url,item.id,item.fileLastName)">
                                                <i
                                                    class="el-icon-link"></i>查看
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 查看附件图片 -->
        <el-dialog width='900px' :visible.sync="dialogVisible" class="lookFile" :before-close="dialogClose">
            <div class="box">
                <img :src="dialogImageUrl" alt="" v-if="dialogImageUrl">
                <pdf :src="dialogPdfUrl" v-if="dialogPdfUrl" v-for="i in numPages" :key="i" :page="i"></pdf>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
import {getResume, getSign} from '@/api/api'

export default {
    //组件注入
    components: {pdf},
    //存放数据
    data() {
        return {
            resumeType: 1,
            editType: '',//add 添加
            editId: '',//编辑id
            resumeId: '',//简历id
            majorResearchDirectionShow: false,
            majorWorkPerformanceShow: false, //主要工作业绩
            selfEvaluationShow: false,
            otherSituationsShow: false,
            formUserInfoShow: false,//个人信息编辑
            formAdvantageShow: false,//个人优势编辑
            formWantJobShow: false,//期望职位编辑
            formWorkShow: false,//工作经历编辑
            formEducationShow: false,//教育经历编辑
            formProjectShow: false,//项目经历编辑
            formTrainShow: false,//培训经历编辑
            formLanguageShow: false,//语言能力编辑
            formSkillShow: false,//技能编辑
            formCertificateShow: false,//证书编辑
            formEnclosureShow: false,//附件上传
            UploadPhotoFlag: false,//上传头像
            fileName: '',
            photo: '',//头像
            familyList: [],
            formUserInfo: {
                name: '游客',//姓名
                sex: '',//性别
                birthday: '',//出生年月
                identity: '',//求职身份
                workState: '',//求职状态
                maritalStatus: '',//婚姻状况
                jobTime: '',//参加工作时间
                worked: false,
                homeTownCode: '',//户口所在地
                liveCityCode: '',//现居住城市
                political: '',//政治面貌
                phone: '',//联系方式
                email: '',//电子邮箱
                age: '0',//年龄
                workYear: '0',//工作时间
                jobTimeFlag: false,//暂无工作经验
                photoId: '',//头像文件id
            },
            formAdvantage: {
                advantage: '',//个人优势
                majorResearchDirection: '',
                selfEvaluation: '',
                majorWorkPerformance: '',//主要工作业(社招)
                otherSituations: '',
            },
            formWantJob: {
                workNatureCode: [],//期望职位
                cityStringCode: [],//期望地点
                workType: '',//求职类型
                workIndustryCode: [],//期望行业
                money: '',//薪资要求范围
            },
            wantJobList: [],//期望职位列表
            formWork: {
                companyName: '',//公司名称
                positionNameCode: [],//所任职位
                workSignCode: [],//该份工作需要的技能
                workTime: '',//在职时间
                salary: '',//税前月薪
                workContent: '',//工作内容
            },
            workList: [],//工作经历列表
            formEducation: {
                schoolName: '',//学校名称
                major: '',//所学专业
                overseasFlag: '',//海外学习经历
                studyTime: '',//就读时间
                recruitmentFlag: '',//是否统招
                eduLevel: '',//学历
            },
            educationList: [],//教育经历列表
            formProject: {
                projectName: '',//项目名称
                time: '',//项目时间
                projectDescribe: '',//项目描述
            },
            projectList: [],//项目经历列表
            formTrain: {
                time: '',//培训时间
                mechanismName: '',//培训机构
                curriculum: '',//培训课程
            },
            trainList: [],//培训经历列表
            formLanguage: {
                type: '',//语种
                oralLanguageLevel: '',//听说能力
                readingLevel: '',//读写能力
            },
            languageList: [],//语言能力列表
            formSkill: {
                name: '',//技能名称
                time: '',//使用时长
                level: '',//掌握程度
            },
            skillList: [],//特长技能
            formCertificate: {
                name: '',//证书名称
                time: '',//获得时间
            },
            certificateList: [],//证书列表
            formEnclosure: {//附件
                name: '',//证书名称
                file: {},//文件
                fileList: []
            },
            uploadFlag: true,
            fileList: [],//附件列表
            dialogVisible: false,//附件图片弹出
            dialogImageUrl: '',//附件图片
            dialogPdfUrl: '',//pdf
            numPages: undefined,//pdf
        }
    },
    filters: {
        deft(str) {
            return str || '无'
        }
    },
    //接受父组件传递的值
    props: [],
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        //调简历信息
        getResume() {
            getResume({
                'resumeId': this.resumeId,
            }).then(res => {
                if (res.code == 200) {
                    // 家庭成员
                    if (res.result.familyMembers) {
                        this.familyList = res.result.familyMembers;
                    }
                    //个人信息
                    if (res.result.userInfo.name) {
                        this.formUserInfo.name = res.result.userInfo.name
                        this.formUserInfo.email = res.result.userInfo.email
                        this.formUserInfo.sex = res.result.userInfo.sex.toString()
                        this.formUserInfo.birthday = res.result.userInfo.birthday
                        this.formUserInfo.homeTownCode = res.result.userInfo.homeTownCode
                        this.formUserInfo.liveCityCode = res.result.userInfo.liveCityCode
                        this.formUserInfo.workState = res.result.userInfo.workState.toString()
                        this.formUserInfo.jobTime = res.result.userInfo.jobTime
                        this.formUserInfo.identity = res.result.userInfo.idEntity.toString()
                        this.formUserInfo.maritalStatus = res.result.userInfo.maritalStatus.toString()
                        this.formUserInfo.updateTime = this.$formatDate(res.result.userInfo.updateTime)
                        this.formUserInfo.liveCity_dictText = res.result.userInfo.liveCity_dictText.split(',')[1]
                        if (res.result.userInfo.phone) {
                            this.formUserInfo.phone = res.result.userInfo.phone
                        } else {
                            this.formUserInfo.phone = this.userName
                        }
                        if (res.result.userInfo.political) {
                            this.formUserInfo.political = res.result.userInfo.political.toString()
                        }
                        this.photo = res.result.userInfo.photoId_dictText
                        let date = this.$formatDate(res.result.userInfo.birthday)
                        this.formUserInfo.age = this.$getDateDifference(date)
                        if (res.result.userInfo.jobTime) {
                            let date1 = this.$formatDate(res.result.userInfo.jobTime)
                            this.formUserInfo.workYear = this.$getDateDifference(date1)
                        }
                        if (res.result.userInfo.jobFlag == 1) {
                            this.formUserInfo.jobTimeFlag = false
                        } else {
                            this.formUserInfo.jobTimeFlag = true
                        }
                    }
                    this.resumeType = res.result.resumes.resumeType
                    //个人优势
                    if (res.result.resumes.advantage) {
                        this.formAdvantage.advantage = res.result.resumes.advantage
                    }
                    if (res.result.resumes.majorResearchDirection) {
                        this.formAdvantage.majorResearchDirection = res.result.resumes.majorResearchDirection
                    }
                    if (res.result.resumes.otherSituations) {
                        this.formAdvantage.otherSituations = res.result.resumes.otherSituations
                    }
                    if (res.result.resumes.selfEvaluation) {
                        this.formAdvantage.selfEvaluation = res.result.resumes.selfEvaluation
                    }
                    if (res.result.resumes.majorWorkPerformance) {
                        this.formAdvantage.majorWorkPerformance = res.result.resumes.majorWorkPerformance
                    }                   
                    //期望职位
                    if (res.result.workIntentions) {
                        let list = res.result.workIntentions
                        for (let i in list) {
                            list[i].cityId_dictText = list[i].cityId_dictText.replace(/\,/g, "/")
                            list[i].workIndustry_dictText = list[i].workIndustry_dictText.split(',')
                            list[i].workNature_dictText = list[i].workNature_dictText.split(',')
                            list[i].money = list[i].minMoney + '-' + list[i].maxMoney
                            if (list[i].money == '0-1000') {
                                list[i].money1 = '1000元/月以下'
                            } else if (list[i].money == '1000-2000') {
                                list[i].money1 = '1000-2000元/月'
                            } else if (list[i].money == '2000-4000') {
                                list[i].money1 = '2000-4000元/月'
                            } else if (list[i].money == '4000-6000') {
                                list[i].money1 = '4000-6000元/月'
                            } else if (list[i].money == '6000-8000') {
                                list[i].money1 = '6000-8000元/月'
                            } else if (list[i].money == '8000-10000') {
                                list[i].money1 = '8000-10000元/月'
                            } else if (list[i].money == '10000-15000') {
                                list[i].money1 = '10000-15000元/月'
                            } else if (list[i].money == '15000-25000') {
                                list[i].money1 = '15000-25000元/月'
                            } else if (list[i].money == '25000-35000') {
                                list[i].money1 = '25000-35000元/月'
                            } else if (list[i].money == '35000-50000') {
                                list[i].money1 = '35000-50000元/月'
                            } else if (list[i].money == '50000-70000') {
                                list[i].money1 = '50000-70000元/月'
                            } else if (list[i].money == '70000-100000') {
                                list[i].money1 = '70000-100000元/月'
                            } else if (list[i].money == '100000-999999') {
                                list[i].money1 = '100000元/月以上'
                            }
                            if (list[i].workType == '0') {
                                list[i].workType_dictText = '全职'
                            } else if (list[i].workType == '1') {
                                list[i].workType_dictText = '兼职'
                            } else if (list[i].workType == '2') {
                                list[i].workType_dictText = '实习'
                            }
                        }
                        this.wantJobList = list
                    }
                    //工作经历
                    if (res.result.userWorkInfos) {
                        let list = res.result.userWorkInfos
                        for (let i in list) {
                            list[i].positionName_dictText = list[i].positionName_dictText.split(',')
                            list[i].workStartTime_dictText = this.$formatDateMonth(list[i].workStartTime)
                            list[i].workEndTime_dictText = list[i].workEndTime === '至今' ? '至今' : this.$formatDateMonth(list[i].workEndTime)
                            list[i].workTime = [list[i].workStartTime, list[i].workEndTime]
                        }
                        this.workList = list
                    }
                    //教育经历
                    if (res.result.userEduInfos) {
                        let list = res.result.userEduInfos
                        for (let i in list) {
                            list[i].startEduTime_dictText = this.$formatDateMonth(list[i].startEduTime)
                            list[i].endEduTime_dictText = this.$formatDateMonth(list[i].endEduTime)
                            list[i].studyTime = [list[i].startEduTime, list[i].endEduTime]
                           // list[i].recruitmentFlag = list[i].recruitmentFlag.toString()
                            list[i].eduLevel = list[i].eduLevel.toString()
                        }
                        this.educationList = list
                        console.log("==测试==="+this.educationList)
                    }
                    //项目经历
                    if (res.result.projectInfos) {
                        let list = res.result.projectInfos
                        for (let i in list) {
                            list[i].startTime_dictText = this.$formatDateMonth(list[i].startTime)
                            list[i].endTime_dictText = this.$formatDateMonth(list[i].endTime)
                            list[i].time = [list[i].startTime, list[i].endTime]
                        }
                        this.projectList = list
                    }
                    //培训经历
                    if (res.result.trainInfos) {
                        let list = res.result.trainInfos
                        for (let i in list) {
                            list[i].startTime_dictText = this.$formatDateMonth(list[i].startTime)
                            list[i].endTime_dictText = this.$formatDateMonth(list[i].endTime)
                            list[i].time = [list[i].startTime, list[i].endTime]
                        }
                        this.trainList = list
                    }
                    //语言能力
                    if (res.result.languageLevelInfos) {
                        let list = res.result.languageLevelInfos
                        this.languageList = list
                    }
                    //特长技能
                    if (res.result.skillsInfos) {
                        let list = res.result.skillsInfos
                        this.skillList = list
                    }
                    //资质证书
                    if (res.result.certificateInfos) {
                        let list = res.result.certificateInfos
                        for (let i in list) {
                            list[i].time_dictText = this.$formatDateMonth(list[i].time)
                        }
                        this.certificateList = list
                    }
                    //附件
                    if (res.result.files) {
                        let list = res.result.files
                        this.fileList = list
                    }
                }
            });
        },
        //查看附件
        openFile(file, fileId, fileLastName) {
            let sign = ''
            //获取签名
            getSign({
                'fileId': fileId,
            }).then(res => {
                if (res.code == 200) {
                    sign = res.result
                    if (fileLastName == 'png' || fileLastName == 'jpg') {
                        this.handlePictureCardPreview(file + '?sign=' + sign)
                    }
                    if (fileLastName == 'pdf') {
                        this.handlePictureCardPreview()
                        this.dialogPdfUrl = pdf.createLoadingTask(file + '?sign=' + sign)
                        this.dialogPdfUrl.promise.then(pdf => {
                            this.numPages = pdf.numPages
                        }).catch(err => {
                            this.$message.error('简历预览失败')
                            console.log(err)
                        })
                    }
                }
            });
        },
        //查看附件图片
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url
            this.dialogVisible = true;
        },
        //清空弹出内容
        dialogClose() {
            this.dialogVisible = false;
            setTimeout(() => {
                this.dialogImageUrl = ''
                this.dialogPdfUrl = ''
            }, 500)
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.resumeId = this.$route.query.id
        //调简历信息
        this.getResume()
    }
};
</script>
<style lang="scss">
@mixin text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin text-ellipsisclamp($clamp) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $clamp;
    overflow: hidden;
}

@mixin transition {
    transition: all .3s;
}

.PersonResumeLook {
    background: #f6f6f6;

    .main {
        min-height: 500px;

        .banner {
            width: 900px;
            height: 120px;
            background: url('../../assets/person-bg.jpg') center no-repeat;
            background-size: cover;
            margin: 0 auto;
        }

        .block {
            height: auto;
            overflow: hidden;
            padding-bottom: 50px;

            .resume {
                width: 900px;
                height: auto;
                overflow: hidden;
                padding: 30px;
                background: #fff;
                margin: 0 auto;

                .section {
                    height: auto;
                    overflow: hidden;
                    margin-bottom: 20px;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #f2f2f2;

                    .title {
                        font-size: 16px;
                        color: #333;
                        font-weight: bold;
                        position: relative;
                        padding-left: 15px;
                        margin-bottom: 10px;

                        &:after {
                            content: "";
                            width: 3px;
                            height: 15px;
                            background: #E54437;
                            position: absolute;
                            left: 0;
                            top: 3px;
                        }

                        .btnEdit {
                            opacity: 1;
                        }
                    }

                    .btnEdit {
                        opacity: 0;
                        float: right;
                        font-size: 14px;
                        color: #999;
                        @include transition();
                        cursor: pointer;
                        font-weight: normal;
                        margin: 0 10px 0 20px;

                        i {
                            margin-right: 4px
                        }

                        &:hover {
                            color: #E54437;
                        }
                    }

                    .form {
                        height: auto;
                        padding: 30px;

                        .el-radio {
                            min-width: 100px;
                            text-align: center;
                            margin: 0 15px 0 0;
                            border-radius: 0;
                            background: #fff;

                            &:last-child {
                                margin: 0;
                            }
                        }

                        .el-input {
                            width: 300px;
                        }

                        .el-input__inner {
                            border-radius: 0;
                        }

                        .el-icon-date, .el-input__icon {
                            vertical-align: -2px;
                        }

                        .el-textarea__inner {
                            height: 100px;
                            border-radius: 0;
                            padding: 10px 15px
                        }

                        .el-textarea .el-input__count {
                            line-height: normal;
                        }

                        .el-form-item:last-child {
                            margin: 0;
                        }

                        .left, .right {
                            width: 48%;
                            height: auto;
                            overflow: visible;
                        }

                        .el-upload {
                            width: 140px;
                            height: 140px;
                            line-height: 140px;
                            border: 1px dashed #DCDFE6;
                            border-radius: 5px;
                            cursor: pointer;

                            i {
                                font-size: 22px;
                                color: #999;
                            }
                        }

                        .hide {
                            .el-upload, .el-upload__tip {
                                display: none;
                            }
                        }
                    }

                    .primary {
                        height: auto;
                        overflow: hidden;
                        position: relative;

                        ul {
                            height: auto;
                            overflow: hidden;

                            li {
                                height: auto;
                                overflow: hidden;
                                margin-bottom: 10px;

                                .t {
                                    font-size: 16px;
                                    color: #333;

                                    span {
                                        font-size: 14px;
                                        color: #999;
                                        margin-left: 10px;
                                    }

                                    .btnEdit {
                                        margin-right: 0;
                                    }
                                }

                                .dsc {
                                    font-size: 14px;
                                    color: #999;
                                    line-height: 30px;
                                    margin-top: 8px;

                                    span {
                                        margin-right: 15px;
                                        position: relative;
                                        padding-right: 15px;

                                        &:after {
                                            content: "";
                                            width: 1px;
                                            height: 12px;
                                            background: #eee;
                                            position: absolute;
                                            right: 0;
                                            top: 2px;
                                        }

                                        &:last-child {
                                            margin: 0;
                                            padding: 0;

                                            &:after {
                                                display: none;
                                            }
                                        }
                                    }

                                    .tt {
                                        color: #666;
                                    }

                                    p {
                                        line-height: 22px;
                                        white-space: pre-wrap;
                                    }
                                }

                                dl {
                                    height: auto;
                                    overflow: hidden;
                                    margin-top: 8px;

                                    dd {
                                        width: 50%;
                                        font-size: 14px;
                                        color: #666;
                                        float: left;
                                        line-height: 30px;

                                        span {
                                            line-height: 24px;
                                            padding: 0 10px;
                                            background: #eee;
                                            display: inline-block;
                                            margin-right: 10px;
                                        }
                                    }
                                }

                                &:last-child {
                                    margin: 0;
                                }
                            }
                        }

                        .txt {
                            white-space: pre-wrap;
                            word-wrap: break-word;
                            font-size: 14px;
                            color: #666;
                            cursor: pointer;
                            padding: 10px;
                            @include transition();

                            &:hover {
                                background: #f9f9f9;

                                .btnEdit {
                                    opacity: 1;
                                }
                            }
                        }
                    }

                    .edit {
                        height: auto;
                        overflow: hidden;
                        position: relative;
                        background: #f6f6f6;
                        margin-top: 20px;
                    }

                    &:last-child {
                        margin: 0;
                        padding: 0;
                        border: 0;
                    }
                }

                .userinfo {
                    .photo {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        overflow: hidden;
                        float: left;
                        margin-right: 20px;
                        cursor: pointer;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .avatar-uploader {
                            width: 100%;
                            height: 100%;
                            background: rgba($color: #000000, $alpha: .5);
                            position: absolute;
                            left: 0;
                            top: 0;
                            opacity: 0;
                            @include transition();

                            i {
                                font-size: 18px;
                                color: #fff
                            }

                            p {
                                font-size: 12px;
                                color: #fff
                            }

                            &:focus {
                                color: #fff;
                            }

                            .el-upload {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                flex-flow: column;
                                align-items: center;
                                justify-content: center;
                            }
                        }

                        &:hover .avatar-uploader {
                            opacity: 1;
                        }
                    }

                    .btnEdit {
                        opacity: 1;
                    }

                    .text {
                        height: auto;
                        overflow: hidden;

                        .name {
                            font-size: 24px;
                            color: #333;
                            font-weight: bold;

                            span {
                                font-size: 14px;
                                color: #999;
                                font-weight: normal;
                                margin-left: 10px
                            }
                        }

                        .other {
                            height: auto;
                            overflow: hidden;
                            margin-top: 10px;

                            span {
                                font-size: 14px;
                                color: #666666;
                                position: relative;
                                padding-right: 15px;
                                margin-left: 15px;

                                &:after {
                                    content: "";
                                    width: 1px;
                                    height: 12px;
                                    background: #e8e8e8;
                                    position: absolute;
                                    right: 0;
                                    top: 3px;
                                }

                                &:first-child {
                                    margin: 0;
                                }

                                &:last-child:after {
                                    display: none;
                                }
                            }
                        }

                        .contact {
                            height: auto;
                            overflow: hidden;
                            margin-top: 10px;

                            span {
                                font-size: 14px;
                                color: #333;
                                margin-right: 30px;

                                i {
                                    font-size: 16px;
                                    vertical-align: -1px;
                                    color: #999;

                                    &.icon-email {
                                        font-size: 17px;
                                        margin-right: 3px;
                                    }
                                }
                            }
                        }
                    }

                    .btnEdit {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }

                    .look {
                        font-size: 14px;
                        color: #999;
                        cursor: pointer;
                        position: absolute;
                        right: 0;
                        top: 50px;
                        margin: 0 10px 0 20px;
                        @include transition();

                        i {
                            margin-right: 4px;
                        }

                        &:hover {
                            color: #E54437;
                        }
                    }
                }
            }
        }
    }

    .lookFile {
        .box {
            height: auto;
            max-height: 500px;
            overflow-y: auto;

            img {
                display: block;
                margin: 0 auto;
            }
        }
    }
}
</style>
